<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./index.css">
</head>

<body>
    <h1>我要设置css样式啦</h1>
    <p>我要把段落设置成粉红粉色</p>

    <h1 id="choice">选择器</h1>
    <!-- 后代选择器 div p {} 是指只要符合 <div><p>这样的</p></div>都可以被选择；
        而像这种，<div><p><h1>这样的</h1></p></div>，那莫div p {} 就不会被选中；
    -->
    <div>
        <div>
            <p> div内的p元素 后代选择器</p>
        </div>
        <p>后代选择器</p>
    </div>
    <hr>

    <div>
        <p>
        <div>子代选择器1</div>
        </p>
        <div>
            <p> 1111111后代选择器</p>
        </div>
        <p>子代选择器</p>
    </div>
    <hr>

    <!-- 相邻兄弟选择器，div + p 是div这个元素和p这个元素是兄弟，且是第一个兄弟； -->
    <h3>相邻兄弟选择器</h3>
    <div>这个是哥哥
    </div>
    <p>这个是弟弟；</p>
    <hr>

    <p>这个是弟弟；</p>
    <div>这个是哥哥
    </div>
    <hr>

    <h3>通用兄弟选择器</h3>
    <div>
        <div>0000</div>
        <p>1111</p>
        <p>2222</p>
    </div>

</body>

</html>